{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/brand_info.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/basic.min.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/dropzone.min.css' %}" type="text/css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="inner wrp">
        <div class="page_nav">
            <a href="{% url 'smErp:manage' %}" class="jsUrlLink" data-url="{% url 'smErp:manage' %}" target="_self">管理中心</a>
            <span class="gap">/</span>
            创建原料
        </div>
        <div class="container_box cell_layout">
            <div class="processor" id="process">
                <ol>
                    <li class="current size1of1">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">1</i>
                            <h4>填写基本信息</h4>
                        </div>
                    </li>
                    <li class="size1of2 last">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">2</i>
                            <h4>提交成功</h4>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="step_panel text_padding">
                <div class="app_create_box app" id="step1">
                    <form class="form" id="form" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="frm_control_group" id="js_name_group">
                            <label for="" class="frm_label">原料名称</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="name" id="name" class="frm_input" type="text">
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group" id="js_name_group">
                            <label for="" class="frm_label">原料产地</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="producer" id="producer" class="frm_input" type="text">
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group" id="js_name_group">
                            <label for="" class="frm_label">来源</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="source_type" id="source_type" class="frm_input" type="text">
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">原料图片</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传原料图片
                                                <br>
                                                大小不超过500KB。
                                            </p>
                                            <button type="button" class="layui-btn" id="material-img" style="background-color: #44b549;">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                            <span class="upload_area webuploader-container"></span>
                                            <input name="ref_image" id="ref_image" value="" type="hidden">
                                            <p class="upload_preview size108" id="fileView-material" style="display: block;">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="frm_control_group" id="js_name_group">
                            <label for="" class="frm_label">原料知识网址</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input name="ref_url" id="ref_url" class="frm_input" type="text">
                                </span>
                            </div>
                        </div>

                        <div class="tool_bar border with_form">
                            <a href="javascript:void(0);" class="btn btn_primary jsSendBt" id="submitBtn">提交</a>
                        </div>
                    </form>
                </div>

                <div class="app_create_box result" id="step2" style="display:none">
                    <div class="page_msg simple default">
                        <div class="inner group">
                            <span class="msg_icon_wrp">
                                <i class="icon_msg success"></i>
                            </span>
                            <div class="msg_content">
                                <h4>您的产品已成功提交审核，预计在3天内完成审核</h4>

                                <p class="spacing">
                                    <a href="{% url 'smErp:manage' %}" data-url="{% url 'smErp:manage' %}t" target="_self" class="btn btn_primary jsUrlLink">查看管理中心</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footscript %}
    <script src="{% static 'smErp/assets/dropzone/dropzone.min.js' %}" ></script>
    <script>
        layui.use('upload', function(){
            var upload = layui.upload;
            //原料图片上传
            var material_uploadInst = upload.render({
                elem: '#material-img' //绑定元素
                ,url: "{% url 'smErp:image_upload' %}" //上传接口
                ,accept: 'images'
                ,data : {"max_size": 500}
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        var fileview_material = $("#fileView-material");
                        fileview_material.empty();
                        fileview_material.append('<img id="" src="' + res.img_url + '">');
                        $("#ref_image").val(res.img_url);

                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });
        });

        $("#submitBtn").on("click", function () {
            // 提交按钮
            var params = $("#form").serialize();
            console.log(params);
            $.post("{% url 'smErp:create_material' %}", params,
                function(data, satuts, xhr) {
                    if(satuts == "success") {
                        if(data.result == 0) {
                            // 提交品牌信息
                            alert(params);
                            // 切换状态
                            // 改变进度 栏状态
                            $("#step1").hide();
                            $("#step2").show();
                        } else {
                            layer.msg(data.reason);
                        }
                    } else {
                        layer.msg(status);
                    }

                },
            'json');
        })
    </script>
{% endblock %}




